<template>
  <PageContainer>
    <Header title="添加共享文件">
      <template>
        <view
          class="hb-bg-[#FFF4E7] hb-px-4 hb-h-23.5 hb-flex hb-flex-col hb-flex-wrap hb-justify-around"
        >
          <text class="hb-text-[#E29942] hb-text-sm">
            仅支持从知识库选择文件，如需添加新文件，请先
            <text class="hb-text-primary" @click="handleGoKnowledgeBase">前往知识库</text>
            上传。
          </text>
          <TmText label="当前文件列表不显示已关联的文件；" color="#E29942" :font-size="28" />
        </view>
      </template>
    </Header>
    <view class="hb-p-4">
      <view class="hb-pb-4 hb-bg-white hb-rounded-xl hb-box-shadow-base hb-px-4">
        <Paglist v-model="dataList" :params="params" :is-init-api="false" @register="register">
          <TmCheckboxGroup v-model="selected">
            <template v-for="item in dataList" :key="item.id">
              <view
                class="hb-w-full hb-flex hb-items-center hb-py-4 hb-border-b hb-border-solid hb-border-[#EBEDF0]"
              >
                <TmCheckbox :margin="[0, 0, 24, 0]" :size="40" :value="item.id" />
                <TmIcon
                  class="hb-flex-shrink-0"
                  :name="`ali-icon ${getFileIcon(item.fileSuffix).icon}`"
                  :follow-theme="false"
                  :color="getFileIcon(item.fileSuffix).color"
                  :font-size="80"
                  @click="handleSelectItem(item)"
                />
                <view
                  class="hb-ml-2 hb-flex-1 hb-flex hb-flex-col hb-justify-between"
                  @click="handleSelectItem(item)"
                >
                  <TmText
                    _class="text-overflow-1 hb-font-bold"
                    :label="item.fileName"
                    :font-size="28"
                  />
                  <view class="hb-flex hb-items-center hb-mt-1">
                    <TmText
                      :label="fileSizeConversion(item.fileSize)"
                      :font-size="24"
                      color="#969799"
                    />
                    <TmText class="hb-mx-1" label="·" color="#969799" :font-size="24" />
                    <TmText
                      :label="formatToDate(item.updateTime)"
                      :font-size="24"
                      color="#969799"
                    />
                  </view>
                </view>
                <TmButton
                  class="hb-flex-shrink-0"
                  :margin="[0, 0]"
                  :padding="[24, 0]"
                  :block="true"
                  :follow-theme="false"
                  :height="48"
                  :font-size="24"
                  outlined
                  :round="16"
                  label="查看"
                  @click="handleOpenDocument(item)"
                />
              </view>
            </template>
          </TmCheckboxGroup>
        </Paglist>
      </view>

      <BottomSubmit :submit-btn-label="submitBtnLabel" @submit="handleSubmit" />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* addCircleSharedFile 添加共享文件 */
  import { KnowledgeBaseFileListResult } from '@/api/knowledgeBase/types';
  import { useConList } from '@/components/Paglist/useConList';
  import { AddCircleSharedFile } from '@/router/types/modules';
  import { formatToDate } from '@/utils/dateUtil';
  import { fileSizeConversion } from '@/utils/file';
  import { getFileIcon, Toast } from '@/utils';
  import { useUpload } from '@/hooks/file/useUpload';
  import { addCircleSharedFile, circleSelectableFileList } from '@/api/contact';

  const { openDocument } = useUpload();
  const params = reactive({
    circleId: 0,
  });
  const selected = ref<number[]>([]);
  let success: AddCircleSharedFile['success'];

  const dataList = ref<KnowledgeBaseFileListResult[]>([]);
  const [register, { refresh }] = useConList();
  provide('api', circleSelectableFileList);

  customOnload<'addCircleSharedFile'>((op) => {
    params.circleId = op.circleId;
    success = op.success;
    refresh?.();
  });

  const handleSelectItem = (v: KnowledgeBaseFileListResult) => {
    if (selected.value.includes(v.id)) {
      selected.value = selected.value.filter((item) => item !== v.id);
    } else {
      selected.value.push(v.id);
    }
  };

  const submitBtnLabel = computed(() => `确认选择（${selected.value.length}）`);

  const handleOpenDocument = (item: KnowledgeBaseFileListResult) => {
    openDocument({ filePath: item.filePathUrl, fileType: item.fileSuffix });
  };

  const handleSubmit = () => {
    addCircleSharedFile({
      circleId: params.circleId,
      fileIds: selected.value,
    }).then(() => {
      success?.(selected.value.length);
      selected.value = [];
      refresh();
      Toast('添加成功');
    });
  };

  const handleGoKnowledgeBase = () => {
    navigateTo({
      name: 'knowledgeBase',
    });
  };

  onPullDownRefresh(() => {
    refresh();
  });
</script>

<style lang="scss" scoped></style>
